<template>
  <div class="rating">
    <input type="radio" name="star" id="star1" />
    <label for="star1">
      <span>😁</span>
      <h4>永远热爱</h4>
    </label>
    <input type="radio" name="star" id="star2" checked />
    <label for="star2">
      <span>😃</span>
      <h4>元气满满</h4>
    </label>
    <input type="radio" name="star" id="star3" />
    <label for="star3">
      <span>🙂</span>
      <h4>微笑面对</h4>
    </label>
    <input type="radio" name="star" id="star4" />
    <label for="star4">
      <span>😐</span>
      <h4>无话可说</h4>
    </label>
    <input type="radio" name="star" id="star5" />
    <label for="star5">
      <span>🤡</span>
      <h4>我是小丑</h4>
    </label>
    <div class="text">你认为现在的生活怎么样呢？</div>
  </div>
</template>

<scriptsetup></scriptsetup>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  font-family: "微软雅黑", sans-serif;
  box-sizing: border-box;
}
span{
  font-size:120px;
}
.rating {
  position: relative;
  display: flex;
  /* 从左向右 */
  justify-content: center;
}
/* 让input 元素隐藏 */
.rating input {
  display: none;
}

.rating label {
  position: relative;
  width: 0;
  height: 120px;
  cursor: pointer;
  transition: 0.5s;
  /* 设置灰度, 设置为1,简单理解为就是给上了黑白滤镜 */
  filter: grayscale(1);
  /* 不透明度,设置为0就是不显示 */
  opacity: 0;
}

.rating:hover label {
  width: 160px;
  opacity: 0.2;
}

/* 这里采用的就是相邻兄弟选择器进行选择
hover 或 checked 时,
灰度设置为0
设置为不透明状态,
再给个宽度
*/
.rating input:hover + label,
.rating input:checked + label {
  filter: grayscale(0);
  opacity: 1;
  width: 160px;
}
.rating label h4 {
  color: #000;
  font-size: 24px;
  padding-top: 10px;
  margin-left: 40px;
  font-weight: 500;
  /* 让文字不换行 */
  white-space: nowrap;
  opacity: 0;
  /* 给底下出来的小字整一个不算是动画的动画吧 */
  transform: translateX(-50px) scale(0);
  transition: 0.5s;
}
/* 选中时的效果 */
.rating input:hover + label h4,
.rating input:checked + label h4 {
  opacity: 1;
  transform: translateY(0px) scale(1);
}
.text {
  position: absolute;
  top: -80px;
  /* 居中效果 */
  left: 50%;
  transform: translateX(-50%);
  color: #000;
  /* 我爱你噢，永远热爱生活，永远热泪盈眶*/
  width: 520px;
  font-weight: 700;
  /* 设置字间距 */
  letter-spacing: 2px;
  text-align: center;
  white-space: nowrap;
  font-size: 36px;
}
</style>
